<template>
    <view class="wrap">
        <scroll-view scroll-y="true">
            <view class="rankList">
                <view class="item" v-for="(item,index) in bookRankList" :key="item._id" @click="toDetail(item._id)">
                    <view class="left">
                        <text style="color:#FA7298; padding: 0 20rpx;">NO{{index+1}}</text>
                        <text class="bookname">{{item.bookname}}</text>
                    </view>
                    <view class="right">
                        <text>{{item.author}} - 共{{item.word}}字</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                colors: '',
                userInfo: {},
                bookRankList: []
            }
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
            this.colors = this.userInfo.themeColors || '#F3C301'
            this.getBookRankList()
        },
        methods: {
            toDetail(id) {
                uni.navigateTo({
                    url: '/subpages/bookRankList/detail?_id=' + id
                })
            },
            getBookRankList() {
                cloudApi.call({
                    name: 'book',
                    data: {
                        api: 'getBookRankList'
                    },
                    success: res => {
                        console.log(res);
                        this.bookRankList = res.result.data
                    }
                })
            }
        },
        onReady() {
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.colors
            })
        },
    }
</script>

<style lang="scss">
    .wrap {
        margin: 20rpx;

        .rankList {
            .item {
                display: flex;
                justify-content: space-between;
                font-size: 24rpx;
                padding: 30rpx 0;

                .left {
                    max-width: 350rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }

                .right {
                    color: #ccc;
                    font-size: 20rpx;
                }
            }
        }
    }
</style>
